<!-- 新手机号 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="更换手机" />
    <view class="mobile">
      <view class="account">
        <uni-easyinput
          prefixIcon="phone"
          v-model="username"
          placeholder="请输入手机号"
          placeholderStyle="font-size:14px;"
          :inputBorder="false"
        />
      </view>
      <view class="password">
        <uni-easyinput
          prefixIcon="compose"
          v-model="smscode"
          placeholder="请输入验证码"
          placeholderStyle="font-size:14px;"
          type="number"
          :maxlength="6"
          :inputBorder="false"
          :styles="{ color: '#333' }"
        />
        <button v-show="!showTime" @click="getSmsCode()">获取验证码</button>
        <button v-show="showTime">{{ time }} s</button>
      </view>
    </view>
    <view class="submit">
      <button @click="submit()">更换手机</button>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import { replaceMobile, sendCode } from '@/services/api/user/login';
  import { LoginParamModel } from '@/services/model/loginModel';
  import config from '@/utils/config';
  import { isEmpty } from '@/utils/is';
  import { router } from '@/utils/router';
  import { Toast } from '@/utils/uniapi/prompt';
  import { reactive, ref } from 'vue';
  /** 用户名 */
  const username = ref<string>('');
  /** 验证码 */
  const smscode = ref<string>('');
  /** 显示验证码倒计时 */
  const showTime = ref<boolean>(false);
  /** 验证码倒计时 */
  const time = ref<number>(60);
  /** 待提交参数 */
  const queryParams = reactive<LoginParamModel>({
    username: username.value,
    smscode: smscode.value,
  });

  /** 获取验证码 */
  const getSmsCode = () => {
    if (isEmpty(username.value)) {
      Toast('请输入手机号');
      return;
    }
    sendCode(username.value).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        showTime.value = true;
        setIntervalFun();
      } else {
        Toast(data.message);
      }
    });
  };

  /** 更换手机 */
  const submit = () => {
    let validate = validateForm();
    if (!validate) return;

    replaceMobile(queryParams).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        router.replaceAll(config.route.security);
      } else {
        Toast(data.message);
      }
    });
  };

  /** 表单校验 */
  const validateForm = () => {
    if (isEmpty(username.value)) {
      Toast('请输入手机号');
      return false;
    }
    if (isEmpty(smscode.value)) {
      Toast('请输入验证码');
      return false;
    }
    return true;
  };

  /** 添加定时器 */
  const setIntervalFun = () => {
    let interval = setInterval(function () {
      time.value--;
      uni.setStorage({
        key: 'change_mobile',
        data: {
          time: time.value,
          date: new Date().getTime(),
        },
        success: function () {},
      });
      if (time.value <= 0) {
        clearInterval(interval);
        showTime.value = false;
        time.value = 60;
      }
    }, 1000);
  };
</script>
<style lang="scss" scoped>
  page {
    background-color: #fff !important;
    padding: 0 40rpx;
  }

  .mobile {
    padding-top: 200rpx;
  }

  .account {
    margin: 40rpx 0;
    border-bottom: 1px solid #bbb;
  }

  .password {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #bbb;
    margin: 40rpx 0;

    input {
      font-size: 32rpx;
    }

    button {
      width: 180rpx;
      color: #fff;
      display: inline-block;
      font-size: 28rpx;
      background-color: #ff6a6c;
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
  }

  .submit {
    margin: 30rpx 0;

    button {
      background-color: #ff6a6c;
      color: #fff;
      font-size: 32rpx;
    }
  }
</style>
